<template>
  <el-form ref="form" :model="studentInfo" :rules="rules" label-width="100px">
    <el-form-item label="学号" prop="studentNo">
      <el-input v-model="studentInfo.studentNo" placeholder="请输入学号" maxlength="50" />
    </el-form-item>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="年级" prop="grade">
          <el-input v-model="studentInfo.grade" placeholder="如：2021" maxlength="10" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="班级" prop="className">
          <el-input v-model="studentInfo.className" placeholder="如：1班" maxlength="50" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="专业" prop="major">
      <el-input v-model="studentInfo.major" placeholder="请输入专业名称" maxlength="100" />
    </el-form-item>

    <el-form-item label="绩点" prop="gpa">
      <el-input-number
        v-model="studentInfo.gpa"
        :min="0"
        :max="4"
        :precision="2"
        :step="0.01"
        controls-position="right"
        style="width: 200px"
      />
      <span style="margin-left: 10px; color: #909399; font-size: 13px">
        范围：0.00 - 4.00
      </span>
    </el-form-item>

    <el-form-item label="联系邮箱" prop="email">
      <el-input v-model="studentInfo.email" placeholder="请输入联系邮箱" maxlength="100" />
    </el-form-item>

    <el-form-item label="技术栈">
      <el-tag
        v-for="tag in techTags"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="handleTagClose(tag)"
        style="margin-right: 10px; margin-bottom: 10px">
        {{ tag }}
      </el-tag>
      <el-input
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        style="width: 120px;"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else size="small" @click="showInput">+ 添加技术</el-button>
      <div style="margin-top: 5px; color: #909399; font-size: 13px">
        如：Java、Python、Vue、MySQL等
      </div>
    </el-form-item>

    <el-form-item label="个人简介" prop="personalIntro">
      <el-input
        v-model="studentInfo.personalIntro"
        type="textarea"
        :rows="5"
        placeholder="介绍一下自己的技能、兴趣和项目经历"
        maxlength="2000"
        show-word-limit
      />
    </el-form-item>

    <el-form-item label="备注">
      <el-input
        v-model="studentInfo.remark"
        type="textarea"
        :rows="2"
        placeholder="其他补充信息"
        maxlength="500"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" size="medium" @click="submit">保存</el-button>
      <el-button type="default" size="medium" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getStudentProfile, saveOrUpdateStudent } from "@/api/system/user";

export default {
  name: "StudentInfo",
  data() {
    return {
      // 学生信息
      studentInfo: {
        studentNo: '',
        grade: '',
        major: '',
        className: '',
        gpa: null,
        techStack: '',
        email: '',
        personalIntro: '',
        remark: ''
      },
      // 技术栈标签数组
      techTags: [],
      inputVisible: false,
      inputValue: '',
      // 表单校验规则
      rules: {
        studentNo: [
          { required: true, message: "请输入学号", trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        gpa: [
          { type: 'number', min: 0, max: 4, message: "绩点范围在0-4之间", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getStudentInfo();
  },
  methods: {
    /** 获取学生信息 */
    getStudentInfo() {
      getStudentProfile().then(response => {
        if (response.data) {
          this.studentInfo = response.data;
          // 解析技术栈JSON
          if (this.studentInfo.techStack) {
            try {
              this.techTags = JSON.parse(this.studentInfo.techStack);
            } catch (e) {
              this.techTags = [];
            }
          }
        }
      }).catch(() => {
        // 如果没有学生信息，保持默认值
      });
    },
    /** 删除技术栈标签 */
    handleTagClose(tag) {
      this.techTags.splice(this.techTags.indexOf(tag), 1);
    },
    /** 显示输入框 */
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    /** 确认输入 */
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue && !this.techTags.includes(inputValue)) {
        this.techTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    /** 提交按钮 */
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 将技术栈数组转为JSON字符串
          this.studentInfo.techStack = JSON.stringify(this.techTags);
          
          saveOrUpdateStudent(this.studentInfo).then(response => {
            this.$modal.msgSuccess("保存成功");
            // 重新获取数据
            this.getStudentInfo();
          });
        }
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/index" };
      this.$tab.closeOpenPage(obj);
    }
  }
};
</script>